<template>
	<view>
		<view class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="target" v-for="(target,index) in orderbyList" @tap="select(index)" :key="index" :class="[target.selected?'on':'']">
				{{target.text}}
				<view v-if="target.orderbyicon" class="icon" :class="target.orderbyicon[target.orderby]"></view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place"></view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product" v-for="(goods) in goodsList" :key="goods.id" @tap="toGoods(goods)">
					<!-- <image mode="widthFix" :src="goods.img?'/static/img/goods/' + goods.img:'/static/img/goods/p1.jpg'"></image> -->
					<view class="img">
						<image mode="widthFix" :src="imgsrc + goods.img"></image>
					</view>
					<view class="info">
						<view class="name">{{goods.name}}</view>
						<view class="text">{{goods.description}}</view>
						<view class="text">规格：{{goods.spec_value}}</view>
						<view class="price-number">
							<view class="price"><span>￥</span>{{goods.price}}</view>
							<view class="slogan">{{goods.original_price}}</view>
							<view class="btn">立即抢购</view>
						</view>

					</view>
				</view>
			</view>
			<view class="loading-text">{{loadingText}}</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				pagenumber: 1, //请求页数：默认为第一页；
				category_id: '',
				goodsList: [],
				imgsrc: Api.imgsrc,
				loadingText: "正在加载...",
				headerTop: "0px",
				headerPosition: "fixed",
				orderbyList: [{
						text: "综合",
						selected: true,
						orderbyicon: false,
						orderby: 0
					},
					{
						text: "销量",
						selected: false,
						orderbyicon: false,
						orderby: 0
					},
					{
						text: "价格",
						selected: false,
						orderbyicon: ['sheng', 'jiang'],
						orderby: 0
					}
				],
				orderby: "sheng"
			};
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.category_id = option.cid;
			uni.setNavigationBarTitle({
				title: option.name
			});
			this.reload();
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			this.pagenumber = 1;
			this.goodsList = [];
			this.reload();
			uni.stopPullDownRefresh();
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
			this.pagenumber = this.pagenumber + 1;
			this.reload()
		},
		methods: {
			async reload() {
				this.logining = true;
				var parm_data = {
					'category_id': this.category_id,
					'offset': this.pagenumber,
				}
				let data = await Api.apiCall('post', Api.goods.goodsList, parm_data);
				if (data.length > 0) {

					for (let item of data) {
						item.img = item.pic;
						item.slogan = '120';
						this.goodsList.push(item);
					}
					this.$forceUpdate();
					this.loadingText = "";
				} else {
					this.loadingText = "到底了";
				}
			},
			//商品跳转
			toGoods(e) {
				uni.navigateTo({
					url: '/mall/product/product?product_id=' + e.id
				});
			},
			//排序类型
			select(index) {
				let tmpTis = this.orderbyList[index].text + "排序 "
				if (this.orderbyList[index].orderbyicon) {
					let type = this.orderbyList[index].orderby == 0 ? '升序' : '降序';
					if (this.orderbyList[index].selected) {
						type = this.orderbyList[index].orderby == 0 ? '降序' : '升序';
						this.orderbyList[index].orderby = this.orderbyList[index].orderby == 0 ? 1 : 0;
					}
					tmpTis += type
				}
				this.orderbyList[index].selected = true;
				let len = this.orderbyList.length;
				for (let i = 0; i < len; i++) {
					if (i != index) {
						this.orderbyList[i].selected = false;
					}
				}
				uni.showToast({
					title: tmpTis,
					icon: "none"
				});
			}
		}
	}
</script>

<style lang="scss">
	.icon {
		font-size: 26upx;
	}

	.header {
		width: 100%;
		padding: 0 2%;
		height: 79upx;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		border-bottom: solid 1upx #eee;

		.target {
			width: 60upx;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			margin-bottom: -2upx;
			color: #aaa;

			&.on {
				color: #555;
				border-bottom: 4upx solid #FFBC21;
				font-weight: 600;
				font-size: 30upx;
			}


		}
	}

	.place {

		background-color: #ffffff;
		height: 100upx;

	}

	.goods-list {
		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}

		.product-list {
			width: 100%;
			padding: 0 4%;

			.product {
				width: 100%;
				height: 280upx;
				display: flex;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 15upx 0;

				// box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
				.img {
					width: 220upx;
					height: 220upx;
					overflow: hidden;
					flex-shrink: 0;
					margin: 29upx 0 31upx 0;

					image {
						width: 100%;
						border-radius: 20upx 20upx 0 0;
					}
				}

				.info {
					width: 100%;
					margin: 10upx 0 30upx 30upx;

					.name {
						line-height: 60upx;
						font-size: 32upx;
						color: #232323;
					}

					.text {
						line-height: 45upx;
						font-size: 24upx;
						color: #ABADAD;
					}

					.price-number {
						height: 70upx;
						margin-top: 20upx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							color: #E52631;
							font-size: 36upx;
							font-weight: 600;

							span {
								font-size: 18upx;
							}
						}

						.slogan {
							color: #ABADAD;
							font-size: 24upx;
							text-decoration: line-through;
						}

						.btn {
							width: 200upx;
							height: 68upx;
							display: flex;
							border-radius: 34upx;
							justify-content: center;
							align-items: center;
							background-color: #FFBC21;
							color: #232323;
							font-size: 26upx;
						}
					}

				}
			}

		}
	}
</style>
